<template>
  <div style="padding: 20px">
    <el-breadcrumb separator="/" style="margin-bottom: 20px">
      <el-breadcrumb-item >当前位置：</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a >角色管理</a></el-breadcrumb-item>
    </el-breadcrumb>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-card style="height: calc(100vh - 150px);overflow: auto;border-radius: 10px 10px 10px 10px">
          <span style="font-size: 13px">角色名称：</span><el-input style="width:200px" v-model="queryParams.name" size="small" placeholder="请输入菜单名" clearable></el-input>
          <el-button type="primary" icon="el-icon-search" size="small" @click="getMenu">查询</el-button>
          <el-button type="success" icon="el-icon-plus" size="small" @click="open" style="text-align: right">新增角色</el-button>
          <van-divider dashed style="margin-bottom: 10px"></van-divider>
          <el-table size="small" :data="tableData" highlight-current-row @current-change="getCurrentChange"  row-key="id" default-expand-none style="width: 100%">
            <el-table-column property="name" label="角色名称" min-width="150"></el-table-column>
            <el-table-column property="desription" label="描述" ></el-table-column>
            <el-table-column property="flag" label="唯一标识" ></el-table-column>
            <el-table-column  label="操作" width="200"   fixed="right" >
              <template slot-scope="scope">
                <el-button type="text" size="mini" icon="el-icon-circle-plus"  @click="menugive(scope.row.id)">分配菜单</el-button>
                <el-button type="text" size="mini"  icon="el-icon-edit"  @click="edit(scope.row)" style="margin-left: 0px;color: #E6A23C">编辑</el-button>
                <el-button type="text" slot="reference"   size="mini" style="margin-left: 0px;color: red" icon="el-icon-delete-solid" @click="delete1(scope.row)">删除</el-button>

              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card  v-if="!role" style="height: calc(100vh - 150px);overflow: auto;border-radius: 10px 10px 10px 10px">
          <el-empty description="暂无数据，请点击左侧角色" :image-size="200" style="margin-top: 25%"></el-empty>
        </el-card>
        <el-card v-else  style="height: calc(100vh - 150px);overflow: auto;border-radius: 10px 10px 10px 10px">
          <div style="text-align: right">
            <el-button type="primary" :disabled="menuId==null" @click="savepression">保存</el-button>
          </div>
          <div style="text-align: left">
            <el-button type="">权限管理</el-button>
          </div>
          <el-collapse  v-model="activeName" accordion style="border-color: white" @change="handleChange" >
            <el-collapse-item  class="title-item" :title="items.name" :name="items.id" style="margin-top: 20px;border-left: 1px solid #ebeef5;border-top: 1px solid #ebeef5;border-right: 1px solid #ebeef5" v-for="items in list" :key="items.id">
              <div v-if="buttons!=null">
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="checkedbuttons" @change="handleCheckedCitiesChange">
                  <el-checkbox v-for="item in buttons" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
                </el-checkbox-group>
              </div>
              <div style="text-align: center" v-else>暂无数据</div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
    </el-row>


    <el-dialog :visible.sync="ifshow" :title="title" width="600px" custom-class="my-dialog" >
      <el-form :model="adddata" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="名称" prop="name">
          <el-input v-model="adddata.name"></el-input>
        </el-form-item>
        <el-form-item label="唯一标识" prop="flag">
          <el-input v-model="adddata.flag"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="desription">
          <el-input v-model="adddata.desription"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即提交</el-button>
          <el-button @click="ifshow=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--    分配菜单-->
    <el-dialog :visible.sync="menudialog" title="分配菜单" style="" custom-class="my-dialog" width="30%">
      <el-tree
        :props="props"
        :data="menuData"
        ref="tree"
        show-checkbox
        node-key="id"
        :default-expanded-keys="expends"
        :default-checked-keys="checks"
        @check-change="handleCheckChange">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span><i :class="data.icon"></i>  {{ data.name}}</span>
        </span>
      </el-tree>
      <div style="text-align: right;margin-top: 30px">

        <el-button type="danger" @click="save" size="small">确定</el-button>
        <el-button type="primary" @click="menudialog=false" size="small">取消</el-button>
      </div>
    </el-dialog>
    <!--    删除-->
    <el-dialog :visible.sync="ifdelete" title="删除" width="500px">
      <div style="text-align: center;font-size: 20px">确定删除该数据?</div>
      <div style="text-align: center;margin-top: 20px">

        <el-button type="danger" @click="sure">确定</el-button>
        <el-button type="primary" @click="ifdelete=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue';
import { Divider } from 'vant';

Vue.use(Divider);
import request from "../utils/request";
export default {
  data(){
    return{
      collapsedcard:false,
      checkAll: false,
      checkedbuttons: [],//选中的权限
      buttons: [],//所有按钮权限
      isIndeterminate: true,
      activeName:'0',
      list:[],
      menuId:null,
      buttonDate:[],
      ifbutton:false,
      props:{
        label:'name'
      },
      role:null,
      expends:[],
      checks:[],
      menuData:[],
      menudialog:false,
      title:'',
      //数据
      adddata:{},
      //规则
      rules: {
        id: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
      },
      ifshow:false,
      total:0,
      tableData:[{}],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        unikey:undefined,
        comment:undefined,
        roleId:undefined,
        name:undefined

      },
      deleteid:'',
      ifdelete:false,
      roleId:0
    }
  },
  created() {
    this.getRole()
  },
  methods:{
    //保存用户权限、
    savepression(){
      request.post('/savepression',{menuId:this.menuId,roleId:this.role.id,pressions:this.checkedbuttons}).then(resp=>{
        this.message(resp.msg,'success')
      })
    },
    //获取当前菜单id
    handleChange(i) {
      this.menuId=i
      request.post('/getCurrentMenu', {menuId: i, roleId: this.role.id}).then(resp => {
        this.buttons=[]
        this.checkedbuttons=[]
        this.buttons=resp.data
        for (let j = 0; j < resp.data.length; j++) {
          if (resp.data[j].isflag){
            this.checkedbuttons.push(resp.data[j].id)
          }
        }
      })
    },

    buttongive(i){
      this.getButton(i)
    this.ifbutton=true
    },
    save(){
      request.post("/roleMenu/"+this.roleId,this.$refs.tree.getCheckedKeys()).then(resp=>{
        let result=resp.data
        if (resp.code===200){
          this.menudialog=false
          this.message('保存成功','success')
        }else {
          this.message('系统出错','error')
        }
      })

    },
    sure(){
      let url='/deleteRoleId'
      let param={
        id:this.deleteid
      }
      request.post(url,param).then(resp=>{
        let result=resp.data
        if (resp.code===200){
          this.getRole()
          this.ifdelete=false
          this.message(resp.errorMessage,'success')
        }
      })
    },

    //分配菜单
    menugive(rowId){
      this.roleId=rowId

      //请求角色数据
      request.get('/getroleMenu/'+rowId).then(resp=>{
        let result=resp.data
          this.checks=resp.data

        //请求菜单数据
        request.post('/getMenu',this.queryParams).then(resp=>{
          let result=resp.data
          if (resp.code===200){
            this.menuData=resp.list
            this.expends=this.menuData.map(v=>v.id)
            request.get("/ids").then(resp=>{
              let result=resp.data
              console.log(resp)
              resp.data.forEach(id=>{
                if (!this.checks.includes(id)){
                  this.$refs.tree.setChecked(id,false)
                }
              })
            })
            this.menudialog=true;
          }
        })

      })
    },

    //删除
    delete1(i){
      this.ifdelete=true
      this.deleteid=i.id
    },
    //编辑
    edit(i){
      console.log(i)
      this.ifshow=true
      this.title='编辑角色'
      this.adddata={
        id:i.id,
        name:i.name,
        desription:i.desription,
        flag:i.flag,
      }
    },
    open(){
      this.clear1()
      this.ifshow=true
      this.title='新增用户'
    },

    //清楚数据
    clear1(){
      this. adddata={}
    },
    //添加
    onSubmit(){
      let url='/addRole'
      request.post(url,this.adddata).then(resp=>{
        let result=resp.data
        if (resp.code===200){
          this.getRole()
          this.ifshow=false

          this.message(resp.errorMessage,'success')
        }else {
          this.message(resp.errorMessage,'error')
        }
      })
    },
    getButton(i){
      let url='/getButton'
      this.queryParams.roleId=i
      request.post(url,this.queryParams).then(resp=>{
        if (resp.code===200){
          for (let i=0;i<resp.list.length;i++){

          }
          this.buttonDate=resp.list
          this.total=resp.total
        }
      })
    },
    //分页
    handleSizeChange(val){
      this.queryParams.pageSize = val;
      this.queryParams.pageNum = 1;
      this.getRole()
    },
    handleCurrentChange(val){
      this.queryParams.pageNum = val;
      this.getRole()
    },
    getRole(){
      let url='/getRole'
      request.post(url,this.queryParams).then(resp=>{
        if (resp.code===200){
          this.tableData=resp.list
          this.total=resp.total
        }
      }).catch(err=>{
        this.message(err,'error')
      })

    },
    //获取所选角色对应的菜单权限
    getRolePressions(){
      request.post('/getRolePressions',this.role).then(resp=>{
        this.list=[]
        this.list=resp.data
      })
    },
    handleCheckAllChange(val) {
      let list=[]
      for (let i = 0; i < this.buttons.length; i++) {
        list.push(this.buttons[i].id)
      }
      this.checkedbuttons = val ? list : [];

      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      const uniqueValues = Array.from(new Set(value));
      this.checkedbuttons = uniqueValues;
      this.isIndeterminate = uniqueValues.length > 0 && uniqueValues.length < this.buttons.length;
    },
    getCurrentChange(val){
      this.activeName='0'
      this.role=val
      this.menuId=null
      this.getRolePressions()
    }
  }
}
</script>
<style>

</style>
<style scoped>
>>> .el-dialog{
  border-radius: 10px 10px 10px 10px
}
>>> .el-dialog__header {
  background-color: #66b1ff;
  border-radius: 10px 10px 0px 0px
}
>>> .el-table th.el-table__cell {
  background-color: #f4f4f4!important;
  color: black!important;
  font-size: 14px!important;
  height: 48.8px;
}
>>> .el-collapse-item__content{
  padding: 10px!important;
}
>>> .van-divider{
  border-color: #bbbbbb!important;
}
>>> .el-collapse-item__header.is-active {
  border-bottom-color: #ebeef5;

}
>>> .el-collapse-item__header{
  background:rgba(245,247,250,.3) !important;
  padding: 0 12px!important;
}
</style>
